<template>
	<view>
    <swiper :style="swiperData.style ? swiperData.style : swiperHeight" :data-components="swiperData.components" :data-ssep="swiperData.ssep"
      :class="[swiperData.class, (isSwiperscaleAnimation && (swiperData.class == 'scaleAnimation sseitem' || swiperData.class == 'scaleAnimation')) ? customTabbar ? (isIpx ? 'customerTabbarIpxHeight': 'customerTabbarHeight' ) : 'swiperHeightDrop' : '',swiperData.child.length>1?'':'swiper-dots-none']"
      :circular="swiperData.circular" :autoplay="swiperData.autoplay" :interval="swiperData.interval"
      :duration="swiperData.duration"  :indicator-dots="swiperData.indicatordots"
      :indicator-color="swiperData.indicatorColor" :indicator-active-color="swiperData.indicatorActiveColor"
      :next-margin="swiperData.nextMargin"
      >
      <block v-for="(firstbannerItem, firstbannerIndex) in swiperData.child" :key="firstbannerIndex">
        <swiper-item v-if="firstbannerItem.tagType == 'swiper-item'" :class="firstbannerItem.class">
          <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
            <view v-if="secondbannerItem.tagType == 'div'" :class="secondbannerItem.class"
              :style="secondbannerItem.style" :data-components="secondbannerItem.components" :data-ssen="secondbannerItem.ssen" :data-ssep="secondbannerItem.ssep">
              <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child"
                :key="thirdbannerIndex">
                <channel-video v-if="thirdbannerItem.tagType == 'channel-video'" :feed-token="thirdbannerItem.token" :style="thirdbannerItem.style" :autoplay="thirdbannerItem.autoplay"	:finder-user-name="thirdbannerItem.finderUserName" :loop="thirdbannerItem.loop" :muted="thirdbannerItem.muted"></channel-video>
                <image @click.stop="cmsClickHandle" :data-handle="thirdbannerItem.onclick"
                  :data-text="thirdbannerItem.text" :data-showmenu="thirdbannerItem.showmenu" :data-finderUserName="thirdbannerItem.finderusername" :data-feedId="thirdbannerItem.feedid" :show-menu-by-longpress="thirdbannerItem.showmenu" v-if="thirdbannerItem.tagType == 'img'"
                  :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle" :src="thirdbannerItem.src"
                  :class="[thirdbannerItem.class, isSwiperscaleAnimation && thirdbannerItem.class == 'scaleAnimation' ? 'swiperimageStyle' : 'swiperimageStyledefault']"
                  :style="thirdbannerItem.style"></image>
                <video
                  v-if="thirdbannerItem.tagType == 'video'"
                  :style="(windowHeight <= 660 && thirdbannerItem.smallscreenstyle) ? thirdbannerItem.smallscreenstyle : (windowHeight > 660 && windowHeight <= 770 && thirdbannerItem.middlescreenstyle) ? thirdbannerItem.middlescreenstyle : (windowHeight > 770 && thirdbannerItem.bigscreenstyle) ? thirdbannerItem.bigscreenstyle : thirdbannerItem.style "
                  :class="[thirdbannerItem.class, isSwiperscaleAnimation && thirdbannerItem.class == 'scaleAnimation' ? 'swiperHeightDrop' : '' ]"
                  :src="thirdbannerItem.src"
                  :autoplay="thirdbannerItem.autoplay"
                  :controls="thirdbannerItem.controls"
                  :enable-progress-gesture="thirdbannerItem.enableProgressGesture"
                  :initial-time="thirdbannerItem.initialTime"
                  :loop="thirdbannerItem.loop"
                  :muted="thirdbannerItem.muted"
                  :show-loading="thirdbannerItem.showLoading"
                  :object-fit="thirdbannerItem.objectFit"
                  :poster="thirdbannerItem.poster"
                  :show-mute-btn="thirdbannerItem.showMuteBtn"
                  :show-play-btn="thirdbannerItem.showPlayBtn"
                  :show-center-play-btn="thirdbannerItem.showCenterPlayBtn"
                  :show-fullscreen-btn="thirdbannerItem.showFullscreenBtn"
                  :play-btn-position="thirdbannerItem.playBtnPosition"
                >
                ></video>
                <navigator @click.stop="navigatorClickHandle(thirdbannerItem)"
                  v-if="thirdbannerItem.tagType == 'a'" :url="thirdbannerItem.href"
                  :target="thirdbannerItem.target" :class="thirdbannerItem.class" :style="thirdbannerItem.style"
                  :open-type="thirdbannerItem.opentype || 'navigate'" hover-class="none"
                  :app-id="thirdbannerItem.appid" :path="thirdbannerItem.path" :tracken="thirdbannerItem.tracken"
                  :trackep="thirdbannerItem.trackep" :data-roomid="firstbannerItem.roomid" :data-starttime="firstbannerItem.textstart" :data-endtime="firstbannerItem.textend" :data-en="firstbannerItem.en" :data-ep="firstbannerItem.ep" :data-carea="firstbannerItem.carea" :data-pagename="firstbannerItem.pagename" :data-path="firstbannerItem.path">
                  <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child"
                    :key="fourthbannerIndex">
                    <image v-if="fourthbannerItem.tagType == 'img'"
                      :mode="fourthbannerItem.mode ? fourthbannerItem.mode : modeStyle"
                      :src="fourthbannerItem.src"
                      :class="[fourthbannerItem.class, isSwiperscaleAnimation && fourthbannerItem.class == 'scaleAnimation' ? 'swiperimageStyle' : 'swiperimageStyledefault']"
                      :style="fourthbannerItem.style"></image>
                  </block>
                </navigator>
                <h2 v-if="thirdbannerItem.tagType == 'h2'" :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</h2>
                <p v-if="thirdbannerItem.tagType == 'p'" :style="thirdbannerItem.style"
                  :class="thirdbannerItem.class">{{ thirdbannerItem.text }}</p>
                <label v-if="thirdbannerItem.tagType == 'label'" :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</label>
                <!-- 第四层循环 tagType == 'div'-->
                <view v-if="thirdbannerItem.tagType == 'div'" :class="thirdbannerItem.class">
                  <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child"
                    :key="fourthbannerIndex">
                    <navigator @click.stop="navigatorClickHandle(fourthbannerItem)"
                      v-if="fourthbannerItem.tagType == 'a'" :url="fourthbannerItem.href"
                      :target="fourthbannerItem.target" :class="fourthbannerItem.class"
                      :style="fourthbannerItem.style" :open-type="fourthbannerItem.opentype || 'navigate'"
                      hover-class="none" :app-id="fourthbannerItem.appid" :path="fourthbannerItem.path"
                      :tracken="thirdbannerItem.tracken" :trackep="thirdbannerItem.trackep">
                      {{ fourthbannerItem.text }}
                    </navigator>
                    <h2 v-if="fourthbannerItem.tagType == 'h2'" :style="fourthbannerItem.style"
                      :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</h2>
                    <p v-if="fourthbannerItem.tagType == 'p'" :style="fourthbannerItem.style"
                      :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</p>
                    <!-- 第五层循环 tagType == 'div'-->
                    <view v-if="fourthbannerItem.tagType == 'div'" :class="fourthbannerItem.class"
                      :style="fourthbannerItem.style">
                      <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child"
                        :key="fifthbannerIndex">
                        <navigator @click.stop="navigatorClickHandle(fifthbannerItem)"
                          v-if="fifthbannerItem.tagType == 'a'" :url="fifthbannerItem.href"
                          :target="fifthbannerItem.target" :class="fifthbannerItem.class"
                          :style="fifthbannerItem.style" :open-type="fifthbannerItem.opentype || 'navigate'"
                          hover-class="none">
                          {{ fifthbannerItem.text }}
                        </navigator>
                        <image v-if="fifthbannerItem.tagType == 'img'"
                          :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                          :src="fifthbannerItem.src"
                          :class="[fifthbannerItem.class, isSwiperscaleAnimation && fifthbannerItem.class == 'scaleAnimation' ? 'swiperimageStyle' : 'swiperimageStyledefault']"
                          :style="fifthbannerItem.style"></image>
                        <h2 v-if="fifthbannerItem.tagType == 'h2'" :style="fifthbannerItem.style"
                          :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</h2>
                        <p v-if="fifthbannerItem.tagType == 'p'" :style="fifthbannerItem.style"
                          :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</p>
                      </block>
                    </view>
                  </block>
                </view>
              </block>
            </view>
          </block>
        </swiper-item>
      </block>
    </swiper>
	</view>
</template>
<script>
  import {
    SYSTEM_INFO,
  } from '@/utils/constant';
  import util from '@/utils/util';
	export default {
    props:{
      swiperData: Object,
      isSwiperscaleAnimation: {
        default: false,
        type: Boolean,
      }
    },
		data() {
			return {
				windowHeight: 0, // 屏幕高度
				windowWidth: 0,
				swiperHeight: '',
				videoStyle:'',
        customTabbar: true,
        isIpx: getApp().globalData.isIpx,
			};
		},

    created() {
      let that = this;
      let systemInfo = uni.getStorageSync(SYSTEM_INFO);
      that.windowHeight = systemInfo.windowHeight;
      that.windowWidth = systemInfo.windowWidth;
      // 视频宽高 1:1
      that.videoStyle = 'height:' + that.windowWidth + 'px' + ';' + 'width:' + that.windowWidth + 'px';
      that.customTabbar = this.$programSetting.customTabbar;
      if(that.customTabbar) {
        if(this.isIpx) {
          that.swiperHeight = 'height:calc(100vh - 150rpx)'
        } else {
          that.swiperHeight = 'height: calc(100vh - 120rpx)'
        }
      } else {
        that.swiperHeight = 'height:' + systemInfo.windowHeight + 'px';
      }
    },

    mounted() {
    },

    methods:{
      navigatorClickHandle(val){
        this.$emit('navigatorClickHandle', val)
        let roomid = val.roomid;
        if(!val.textend) {
          let starttime = val.textend;
          let endtime = val.textend
          let startTime =  new Date(starttime).getTime();
          let endTime =  new Date(endtime).getTime();
          let trackStartTime = this.trackDate(startTime)
          let trackendTime = this.trackDate(endTime)
        }
        let handleName = val.onclick;
        let carea = val.carea;
        let pagename = val.pagename;
        let path = val.path;
        if(!!val.en) {
          let clTrackPrams = {
            'c_content_name': val.cname,
            'c_link_pagename': val.pagename,
            'c_link_path': val.linkpath
          }
          getApp().commonClTrack(val.en, clTrackPrams)
        }
        if (handleName == 'infoTrack') {
          let clTrackPrams = {
            'c_area': carea,
            'c_link_pagename': pagename,
            'c_link_path': path
          }
          getApp().commonClTrack(val.en, clTrackPrams)
        }
        // kv跳转直播间解析
        if (handleName == 'toRoom') {
          let roomId = roomid;
          let customParams = encodeURIComponent(
            JSON.stringify({
              path: 'pages/index/index',
              pid: 1
            })
          );
          //家园系列活动页-点击kv查看直播埋点
          let clTrackPrams = {
            'c_live_start_time': trackStartTime || '',
            'c_live_end_time': trackendTime || ''
          }
          getApp().commonClTrack('c_ebmp_homecollection_live_click', clTrackPrams)
          // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
          wx.navigateTo({
            url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
          });
        }
  },
      cmsClickHandle(e) {
      },
      //埋点北京时间转换成utc时间
      trackDate(timeStamp) {
        var timeDifference = timeStamp - 8 * 60 * 60 * 1000;
        let utcDateTime = util.timeFormat(timeDifference, true)
        return utcDateTime
      },
    },
	}
</script>

<style lang="less">
  .swiperHeightDrop {
    height: 100vh !important;
    transition: all linear .35s;
  }

  .customerTabbarHeight {
    height: calc(100vh - 120rpx) !important;
    transition: all linear .35s;
  }
  .customerTabbarIpxHeight {
    height: calc(100vh - 150rpx) !important;
    transition: all linear .35s;
  }

  .swiperimageStyle {
    transform: scale(1.2);
    transition: all linear .35s;
  }

  .swiperimageStyledefault {
    transform: scale(1);
    transition: all linear .35s;
  }
</style>
